import React from 'react';
import { Timeline } from 'antd';
import { SunOutlined, CloudOutlined, ThunderboltOutlined } from '@ant-design/icons';
import { FaCloudRain } from 'react-icons/fa'; // 使用替代的雨天图标

import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc'; // 引入 UTC 插件
import timezone from 'dayjs/plugin/timezone'; // 引入时区插件
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'; // 引入比较插件
dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.extend(isSameOrAfter);

const weatherIcons = {
  sunny: <SunOutlined style={{ color: '#FFD700', fontSize: '0.16rem' }} />, // 晴天
  cloudy: <CloudOutlined style={{ color: '#B0C4DE', fontSize: '0.16rem' }} />, // 多云
  rain: <FaCloudRain style={{ color: '#87CEEB', fontSize: '0.16rem' }} />, // 使用替代的雨天图标
  thunderstorm: <ThunderboltOutlined style={{ color: '#FF4500', fontSize: '0.16rem' }} />, // 雷暴
};

// 星期几的映射
const dayMapping = {
  Mon: '周一',
  Tue: '周二',
  Wed: '周三',
  Thu: '周四',
  Fri: '周五',
  Sat: '周六',
  Sun: '周日',
};

const getWeatherIcon = (weather) => {
  if (weather.includes('晴')) return weatherIcons.sunny;
  if (weather.includes('云') || weather.includes('阴')) return weatherIcons.cloudy;
  if (weather.includes('雨')) return weatherIcons.rain; // 使用雨天图标
  if (weather.includes('雷')) return weatherIcons.thunderstorm;
  return <CloudOutlined style={{ fontSize: '0.16rem' }} />; // 默认图标
};

const WeatherForecast = ({ weatherData }) => {
  if (!weatherData || !weatherData.data) return null;

  const currentDate = dayjs().tz('Asia/Shanghai'); // 获取当前北京时间
  const todayDay = currentDate.format('ddd'); // 获取今天的星期几（如"Mon"）
  const yesterdayDay = currentDate.subtract(1, 'day').format('ddd'); // 获取昨天的星期几
  const tomorrowDay = currentDate.add(1, 'day').format('ddd'); // 获取明天的星期几

  // 将英文星期几转换为中文
  const todayDayCN = dayMapping[todayDay];
  const yesterdayDayCN = dayMapping[yesterdayDay];
  const tomorrowDayCN = dayMapping[tomorrowDay];

  // 构建时间线项
  const timelineItems = weatherData.data.map((day, index) => {
    const isToday = day.date === todayDayCN;
    const isYesterday = day.date === yesterdayDayCN;
    const isTomorrow = day.date === tomorrowDayCN;

    return {
      key: index,
      dot: getWeatherIcon(day.weather),
      label: (
        <p style={{ 
          marginBottom: 2, 
          fontWeight: isToday ? 'bold' : 'normal', 
          color: isToday ? 'green' : 'inherit',
          fontSize: '0.14rem'
        }}>
          {isYesterday ? '昨天' : isToday ? '今天' : isTomorrow ? '明天' : day.date}
          {isToday && ` (${currentDate.format('YYYY-MM-DD')})`}
        </p>
      ),
      children: <p style={{ fontSize: '0.14rem' }}>{day.weather}, 温度: {day.temperature}</p>,
    };
  });

  return (
    <div style={{ 
      padding: '0.08rem', 
      background: '#fff', 
      borderRadius: '0.04rem', 
      boxShadow: '0 0.01rem 0.04rem rgba(0,0,0,0.15)',
      marginTop: '0.08rem'
    }}>
      <h3 style={{ textAlign: 'center', fontSize: '0.16rem', marginBottom: '0.08rem' }}>天气预报</h3>
      <Timeline 
        mode="left" 
        items={timelineItems}
        style={{ fontSize: '0.14rem' }}
      />
    </div>
  );
};

export default WeatherForecast;
